<template>
    <div>
        <div class="about-area">
            <div class="container">
                <div class="about-area-wrapper">
                    <div class="card-1">
                        <div class="card-1-title">展銷管位置：<span>中國香港九龍城區九龍城窩打老道100號龍騰閣</span></div>
                        <div ref="mapContainer" style="width: 100%; height: 500px; background-color: #EEEEEE;"></div>
                    </div>
                    <div class="card-2">
                        <h4 class="car-widget-title">展館環境</h4>
                        <ul class="environment-list">
                            <li class="environment-item">
                                <img src="~/static/picture/environment-1.png" alt="">
                            </li>
                            <li class="environment-item">
                                <img src="~/static/picture/environment-2.png" alt="">
                            </li>
                            <li class="environment-item">
                                <img src="~/static/picture/environment-3.png" alt="">
                            </li>
                            <li class="environment-item">
                                <img src="~/static/picture/environment-4.png" alt="">
                            </li>
                            <li class="environment-item">
                                <img src="~/static/picture/environment-5.png" alt="">
                            </li>
                            <li class="environment-item">
                                <img src="~/static/picture/environment-6.png" alt="">
                            </li>
                            <li class="environment-item">
                                <img src="~/static/picture/environment-7.png" alt="">
                            </li>
                            <li class="environment-item">
                                <img src="~/static/picture/environment-8.png" alt="">
                            </li>
                            <li class="environment-item">
                                <img src="~/static/picture/environment-9.png" alt="">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'aboutPage',
    layout: 'reception',
    mounted() {
        this.loadAMapScript()
            .then(() => {
                this.initMap(); // 地图初始化
            })
            .catch((err) => {
                console.error('高德地图脚本加载失败:', err);
            });
    },
    methods: {
        // 动态加载高德地图脚本
        loadAMapScript() {
            return new Promise((resolve, reject) => {
                if (window.AMap) {
                    resolve(); // 如果已加载过高德地图 API，则直接返回
                } else {
                    const script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.src =
                        'https://webapi.amap.com/maps?v=2.0&key=57fc7f38e6fceb1f06f10e42203c9941';
                    script.onerror = reject;
                    script.onload = resolve;
                    document.head.appendChild(script);
                }
            });
        },
        // 初始化地图
        initMap() {
            const map = new window.AMap.Map(this.$refs.mapContainer, {
                center: [114.183503, 22.320517], // 地图中心点坐标
                zoom: 16, // 缩放级别
            });

            // 添加标记点
            const marker = new window.AMap.Marker({
                position: new window.AMap.LngLat(114.183503, 22.320517),
                title: '当前位置',
            });

            map.add(marker);
        },
    },
};
</script>